<template>
  <div>
    <div class="top"> 
      <div v-if="user.virtuallyImage !=''" class="userInfo">
        <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+user.virtuallyImage ">
          <i class="el-icon-picture-outline"></i>
        </el-image>
        <div>{{user.virtuallyName}}</div>
        <div>个性签名 ：{{ user.personal }}</div>
      </div>
      <div v-else class="userInfo">
        <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+1710084365837 ">
          <i class="el-icon-picture-outline"></i>
        </el-image>
        <div>未选择角色</div>
        <div>个性签名 ：。。。。</div>
      </div>
      <div>
        <el-button type="primary" @click="change()" v-if="user.virtuallyImage !=''">更换匿名</el-button>
        <el-button type="primary" @click="change()" v-else>选择匿名</el-button>
        <el-button type="primary" @click="add()">发布信息</el-button>
      </div>
      
    </div>
    <!-- 以区域树洞为标记 -->
    <div v-if="openREgion">

    </div>
    <div >
      <el-row :gutter="20">
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-card class="box-card" 
                v-for="(item, index) in processedData"
                :key="index"
                style="margin-top: 2px; "
                 >
              <span>
                <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item.virtuallyImage" width="24px" height="24px"></el-image>
              </span>
              <span   style="font-size: 16px; color: #333; font-weight: bold;">
                {{ item.virtuallyName }}
              </span>
              <span style="color: #646464;font-size: 14px; ">
                {{ item.virtuallyIntro }}
              </span>
              <div @click="reply(item.articleId)" style="font-size: 18px;font-weight: 600;font-synthesis: style;line-height: 1.6;color: #1a1a1a; margin-top: 6px;cursor: pointer;">
                {{ item.articleTitle }}
              </div>
              <div v-html="item.articleContent" class="w-e-text-container" style=" cursor: pointer; "@click="reply(item.articleId)">
              </div>
              <div style="margin-top: 16px; display: flex;flex-direction: row;align-items: center;" >
                <div @click="reply(item.articleId)"><i class="el-icon-chat-line-round"></i>
                  <i>{{ item.articleCount }} 条评论</i>
                </div>
                  <i class="el-icon-timer" style="margin-left: 20px;"></i>
                  <i style="flood-color: #859ec5;">{{ formatTime(item.createDate) }}</i>
                  <div style="margin-left: 30px">  

                    <button @click="toggleLike(item.articleId)" :class="{ liked: item.likeStatus }">  
                      <span v-if="item.likeStatus">👍</span>  
                      <span v-else>🖤</span>  
                      <span>{{ item.likeCount }}</span>  
                    </button>  
                  </div> 
                  <div style="margin-left: 30px">  
                    <button @click="toggleCollect(item.articleId)" :class="{ collected: item.collectStatus }">  
                      <span v-if="item.collectStatus">已收藏</span>  
                      <span v-else>收藏</span>  
                    </button>  
                  </div> 
              </div>
             
            </el-card>
          </div>
        </el-col>

        <el-col :span="6">
          <div style="background-color: #ffffff;padding-left: 20px; border-radius: 5px 5px 5px 5px;">
            <i class="el-icon-location-information" style="margin-right: 5px;"></i>
            区域树洞
          </div>
          <div class="grid-content bg-purple-light" v-for="item in dropdownItems" :key="item.id">
            
            <el-card class="box-card" style="margin-top: 2px; " >
              <el-row :gutter="20" style="display: flex;align-items: center; font-size: 12px; ">
                <el-col :span="6"><div class="grid-content bg-purple">
                  <el-image  class="image16"  :src="'http://localhost:8080/api/files/'+item.categoryImage "></el-image>
                </div>
              </el-col>
                <el-col :span="18"><div class="grid-content bg-purple-light">
                  <div slot="header" class="clearfix">
                    <span @click="changPage(item.id)">{{item.categoryName}}</span>
                  </div>
                  <div @click="changPage(item.id)" class="categoryDescribe" >
                    {{item.categoryDescribe }}
                  </div>  
                  </div>
                </el-col>
              </el-row>
              
            </el-card>
          </div>
        </el-col>
      </el-row>
     
    </div>
        <div>
            <el-dialog title="请填写信息" :visible.sync="dialogFormVisible" width="50%" >
                <el-form :model="form" ref="form" :rules="rules">
                  <el-form-item label="标题" label-width="15%" prop="articleTitle">
                      <el-input v-model="form.articleTitle" autocomplete="off" style="width: 90%"></el-input>
                  </el-form-item>
                  <div class="dropdown1">
                    <el-dropdown @command="handleCommand" prop="articleCategoryId" >
                      <el-button type="primary" >选择区域树洞<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in dropdownItems" :key="item.id" :command="item.id">{{ item.categoryName}}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                    
                  </div>
                  <el-form-item label="内容" label-width="15%" >
                    <div id="editor" style="width: 90%"></div>
                  </el-form-item>
                  <!-- <el-form-item label="内容" label-width="15%" >
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="form.articleContent">
                    </el-input>
                  </el-form-item>
                  <el-form-item label = "选择图片" label-width="15%">
                    <el-upload
                      :action="'http://localhost:8080/api/files/upload'"
                      :multiple="true"
                      :file-list="fileList"
                      :on-before-upload="beforeUpload"
                      :on-success="onSuccess"
                      :on-remove="onRemove"
                      :show-file-list ="false">
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                    <ul>
                      <li v-for="file in fileList" :key="file.uid" style="display: flex; margin-top: 20px;justify-content: center;">
                        <img :src="'http://localhost:8080/api/files/'+file.response.data" class="image99">
                        <el-button type="danger" icon="el-icon-delete" @click="onRemove(file, fileList)" style="height: 30px"></el-button>
                      </li>
                    </ul>
                  </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit()">发布</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
          <el-dialog title="评论信息" :visible.sync="articleMain" width="60%" >
            <div class="dialog-content">
              <div style="margin-right: 10px;">
                <!--文章标题 -->
                <div style="font-weight: bold;    font-size: 16px;color: #1a1a1a;padding-left: 40px; ">
                  {{ articleMain1.articleTitle }}
                </div>
                <!-- 文章内容 -->
                <div>
                  <div v-html="articleMain1.articleContent" class="w-e-text-container" style="padding-right: 20px;padding-top: 6px;padding-bottom: 6px;background-color: #f6f6f6;padding-left: 40px; "></div>
                </div>
              </div>
              <!--写评论 -->
              <div style="display: flex;justify-content: space-between;align-items: flex-end;margin-top: 16px;margin-right: 10px; ">
                <div>
                  <el-input style="width: 600px; margin-left: 44px;"
                    type="textarea"
                    :rows="2"
                    v-model="mainReply.replyContent"
                    placeholder="写评论。。。"
                    >
                  </el-input>
                </div>
                <div >
                  <el-button type="primary" @click="submitMReply(articleMain1)">评论</el-button>
                </div>
              </div>
              <!-- 共几条回复文章的 -->
              <div style="border-bottom: 1px solid lightgrey ;font-weight: bold;    font-size: 16px;color: #1a1a1a;padding-left: 34px;">
                {{ articleMain1.articleCount }}条评论
              </div>
              <!-- 评论内容 -->
              <div v-if="articleMain1.articleCount != 0" style="margin-top: 20px;">
                <div class="grid-content bg-purple">
                  <div style="padding-left: 5px;padding-right: 5px; margin-top: 6px;"
                      v-for="(item, index) in articleMain1.mainReply"
                      :key="index">
                      <div style="border-bottom: 1px solid lightgrey">
                      <div style="display: flex;justify-content: space-between;">
                        <div style="display: flex;align-items: center">
                          <span>
                            <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item.virtuallyImage" width="24px" height="24px"></el-image>
                          </span>
                          <span   style="font-size: 16px; color: #333; font-weight: bold;margin-left: 10px;">
                            {{ item.virtuallyName }}
                          </span>
                        </div>
                        <i>{{ formatTime(item.createDate) }}</i>
                      </div>
                    
                      <div style="margin-top: 16px; margin-left: 34px;">
                        {{ item.replyContent }}
                      </div>
                      <div style="margin-top: 12px;margin-left: 34px; display: flex;flex-direction: row;align-items: center;">
                        <i class="el-icon-chat-line-round" ></i>
                        <el-popover placement="bottom">
                          <div style="display: flex; align-items: center;">
                            <el-input style="width: 600px;"
                            type="textarea"
                            :rows="2"
                            placeholder="写评论。。。"
                            v-model="chileReply.replyContent"
                            >
                            </el-input>
                            <el-button   style="margin-left: 5px;" @click="submitCReply(item)" >回复</el-button>
                          </div>
                          
                          <el-button slot="reference"  style="margin-left: 5px;">回复</el-button>
                        </el-popover>
                         <!--  <div slot="reference" @click="visible = true">回复</div> -->
                        
                      </div>
                      
                    </div>
                      <!-- 评论的回复 -->
                      <div v-if="item.childReply" style="padding-left: 20px;">
                        <div style="border-bottom: 1px solid lightgrey"
                         v-for="(item1, index) in item.childReply":key="index">
                          <div style="display: flex;justify-content: space-between; margin-top: 6px;">
                            <div style="display: flex;align-items: center">
                            <span>
                              <el-image  class="image12" :src="'http://localhost:8080/api/files/' +item1.virtuallyImage" width="24px" height="24px"></el-image>
                            </span>
                            <span   style="margin-left: 10px;">
                              <i style="font-size: 16px; color: #333; font-weight: bold;">{{ item1.virtuallyName }}</i> <i>回复</i><i style="font-size: 16px; color: #333; font-weight: bold;">   {{ item1.replyName }}</i>
                            </span>
                          </div>
                            <i>{{ formatTime(item1.createDate) }}</i>
                          </div>
                          
                          <div style="margin-top: 16px; margin-left: 34px;">
                            {{ item1.replyContent }}
                          </div>
                        <div style="margin-top: 12px; margin-left: 34px; display: flex;flex-direction: row;align-items: center;" >
                          <i class="el-icon-chat-line-round" ></i>
                          <el-popover placement="bottom">
                            <div style="display: flex; align-items: center;">
                              <el-input style="width: 600px;"
                              type="textarea"
                              :rows="2"
                              placeholder="写评论。。。"
                              v-model="chileReply.replyContent"
                              >
                              </el-input>
                              <el-button   style="margin-left: 5px;" @click="submitCReply1(item,item1)" >回复</el-button>
                            </div>
                          <el-button slot="reference"  style="margin-left: 5px;">回复</el-button>
                          </el-popover>
                        </div>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
              <div v-else style="   
                    display: flex;
                    align-items: center;
                    height: 60px;
                    width: auto;
                    justify-content: center;" >
                <div style="height: 12px;">还没有评论过哦</div>
              </div>
              
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="articleMain = false">取 消</el-button>
            </div>
            </el-dialog>
        </div>
  </div>
</template>

<style>

.top{
    height: 300px;
    margin-top: 30px;
    margin-bottom: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-position-x: 270px ;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}
.dropdown1{
  margin-bottom: 20px;
  margin-left: 120px;
}
.image12{
  height: 24px;
  width: 24px;
}
.image16{
  max-width: 70px;
}
.categoryDescribe{
  font-size: 14px;
}
.userInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dialog-content {
  max-height: 400px; /* 这里的300px是示例值，根据需要调整 */
  overflow-y: auto;
}
.image99{
  height: 300px;
  width: 300px;
  margin-right: 20px;
}
.liked {  
  color: red; /* 点赞后的按钮文字或图标变为红色 */  
}  
.collected {  
  color: blue; /* 收藏后的按钮文字变为蓝色 */  
}  





</style>
<script>
import request from '@/utils/request';
import { formatTime } from '@/utils/dateUtils';
import E from 'wangeditor';

let editor
function initWangEditor(content) {	setTimeout(() => {
  if(editor){
    editor.destroy();
  }
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
    editor.create()
  editor.txt.html(content)
}, 0)
}

export default { 
  name: 'HomeView',
  data(){
    return{
      visible: false,
      openREgion : false,
      mainReply:{},
      chileReply:{},
      articleMain:false,
      articleMain1: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      form:[],
      dialogFormVisible :false,
      columnsInRow: 2,
      processedData: [],
      params: {
              pageNum: 1,
              pageSize: 8,
              articleTags: 2,
            },
      dropdownItems:[],
      rules: {
        articleTitle: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
        articleCategoryId:[
          { required: true, message: '未选择区域树洞', trigger: 'blur'}
        ]
      },  
      //存放图片的列表
      fileList: [],
      isLiked: false, // 当前用户是否已点赞  
      //likeCount: 0, // 点赞数  
      isCollected: false, // 是否已收藏  
      }
    },
     // 页面加载的时候，做一些事情，在created里面
    created() {
      this. load()
      
    },
    // 定义一些页面上控件出发的事件调用的方法
    methods: {
      formatTime,
      load(){
        this.fetchData();
        this.category();
      },
      fetchData(){
      request.get("/articleMain/page", {
                params: this.params
            })
      .then(res=>{
        if (res.code === 1) {
                    this.processedData = res.data.list;
                    this.total=res.data.total
                }
                else{
                    this.$message.error(res.msg)
                }
      })
     },
     successUpload(res) {
            this.form.userIcon = res.data;
        },
      add(){
        initWangEditor("")
        //查询分类
        this.form = {};
        this.dialogFormVisible = true
      },
      category(){
        request.get("/articleCategory/findAll").then(res=>{
            if (res.code === 1) {
                    this.dropdownItems = res.data;
                }
                else{
                    this.$message.error(res.msg)
                }
          })
      },
      handleCommand(command) {
      // 处理下拉菜单点击事件
      this.form.articleCategoryId=command;
    },
    submit(obj){
      // const photoList =[];
      // //判断是否有上传图片
      // if(this.fileList.length >0){
      //   this.fileList.forEach(item=>{
      //     photoList.push(item.response.data)
      //   })
      // }
      // const result=photoList.join(',');
      // this.form.articleImage=result;
      this.form.articleContent = JSON.parse(JSON.stringify(editor.txt.html()));
      this.form.articleTags = 2;
      this.$refs.form.validate((valid) => {
      if (valid) {
        request.post("/articleMain/create",this.form).then(res=>{
        if(res.code === 1){

          this.$message ({
            message:res.data,
            type:"success"
          });
            this.dialogFormVisible = false;
            this.fetchData();
          }else{
            this.$message ({
            message:res.msg,
            type:"error"
          });
        }
      })
        }
      else {
        return false;
      }})
      
    },
    
    
    change(){
      this.$router.push("/virtual")

    },
    reply(str){
      this.articleMain = true;
      request.get("/articleMain/findById/"+str).then(res=>{
        if(res.code === 1){
          this.articleMain1 = res.data;
          
        }else{
          this.$message.error(res.msg)
        }
      })

    },
    submitCReply(obj){
      this.chileReply.articleId = obj.articleId;
      this.chileReply.isReply = "2"
      this.chileReply.replyId = obj.id
      request.post("/articleReply/create",this.chileReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.chileReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })

    },
    submitMReply(obj){
      
      this.mainReply.articleId = obj.articleId;
      this.mainReply.isReply = "1"
      request.post("/articleReply/create",this.mainReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.mainReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    submitCReply1(obj,obj1){
      this.chileReply.articleId = obj.articleId;
      this.chileReply.isReply = "3"
      this.chileReply.replyId = obj.id
      this.chileReply.replyIdReply = obj1.id
      request.post("/articleReply/create",this.chileReply).then(res=>{
        if(res.code === 1){
          this.reply(obj.articleId)
          this.chileReply.replyContent = ''
        }else{
          this.$message.error(res.msg)
        }
      })
    },
    changPage(str){
      this.$router.push({path:"/region",query:{ categoryId: str }})
      
    },
    beforeUpload(file) {
      if (this.fileList.length >= 3) {
        this.$message.error('最多只能上传三张图片');
        return false;
      }
      return true;
    },
    onSuccess(response, file, fileList) {
      const imageUrl = response.data;
      this.fileList = fileList.slice();
    },
    onRemove(file, fileList) {
      fileList=fileList.filter(item=> item.response.data != file.response.data)
      this.fileList = fileList.slice();
    }, 
    toggleLike(id) {  
      this.isLiked = !this.isLiked; // 切换点赞状态  
      //if (this.isLiked) {  
        //this.likeCount++; // 点赞时增加点赞数  
        request.post("/articleLike/like/"+id).then(res=>{
          if(res.code === 1){
            this.fetchData();
          }
        })
     // } //else {  
        // 取消点赞时，这里我们假设不能减少点赞数，因为实际中点赞数应该是后端维护的  
        // 如果后端支持取消点赞并减少点赞数，那么应该发送请求到后端处理  
        this.likeCount--;  
     // }  
    },  
    toggleCollect(id) {  
      request.post("/collectMain/collect/"+id).then(res=>{
        if(res.code === 1){
          this.fetchData();
        }else{
          message.error(res.msg)
        }
      })
      //this.isCollected = !this.isCollected; // 切换收藏状态  
      //if (this.isCollected) {  
        // 如果已收藏，可以发送请求到后端进行记录  
      //  console.log('已收藏');  
     // } else {  
        // 如果取消收藏，同样发送请求到后端进行处理  
      //  console.log('已取消收藏');  
      //}  
      // 这里只是模拟，实际中应发送请求到后端记录收藏状态  
    },  
  }
}

</script> 